<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>基于vue-router的案例</title>
    <style type="text/css">
      html,
      body,
      #app {
        margin: 0;
        padding: 0px;
        height: 100%;
      }

      .header {
        height: 50px;
        background-color: #545c64;
        line-height: 50px;
        text-align: center;
        font-size: 24px;
        color: #fff;
      }

      .footer {
        height: 40px;
        line-height: 40px;
        background-color: #888;
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        color: #fff;
      }

      .main {
        display: flex;
        position: absolute;
        top: 50px;
        bottom: 40px;
        width: 100%;
      }

      .content {
        flex: 1;
        text-align: center;
        height: 100%;
      }

      .left {
        flex: 0 0 20%;
        background-color: #545c64;
      }

      .left a {
        color: white;
        text-decoration: none;
      }

      .right {
        margin: 5px;
      }

      .btns {
        width: 100%;
        height: 35px;
        line-height: 35px;
        background-color: #f5f5f5;
        text-align: left;
        padding-left: 10px;
        box-sizing: border-box;
      }

      button {
        height: 30px;
        background-color: #ecf5ff;
        border: 1px solid lightskyblue;
        font-size: 12px;
        padding: 0 20px;
      }

      .main-content {
        margin-top: 10px;
      }

      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      ul li {
        height: 45px;
        line-height: 45px;
        background-color: #a0a0a0;
        color: #fff;
        cursor: pointer;
        border-bottom: 1px solid #fff;
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      td,
      th {
        border: 1px solid #eee;
        line-height: 35px;
        font-size: 12px;
      }

      th {
        background-color: #ddd;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <!-- 到达目的地（占位符） -->
      <router-view></router-view>
    </div>
  </body>
  <script src="lib/vue_2.5.22.js"></script>
  <script src="lib/vue-router_3.0.2.js"></script>
  <script>
    const App = {
      template: `
    <div>
      <!-- 头部区域 -->
      <header class="header">传智后台管理系统</header>
      <!-- 中间主体区域 -->
      <div class="main">
        <!-- 左侧菜单栏 -->
        <div class="content left">
          <ul>
            <router-link tag='li' to="/user">用户管理</router-link>
            <router-link tag='li' to="/rights">权限管理</router-link>
            <router-link tag='li' to="/goods">商品管理</router-link>
            <router-link tag='li' to="/order">订单管理</router-link>
            <router-link tag='li' to="/setting">系统设置</router-link>
          </ul>
        </div>
        <!-- 右侧内容区域 -->
        <div class="content right"><div class="main-content"><h2>添加用户表单</h2></div>
        <router-view></router-view>
        </div>
      </div>
      <!-- 尾部区域 -->
      <footer class="footer">版权信息</footer>
    </div>
    `
    };
    const User = {
      data() {
        return {
          userlist: [
            { id: 1, name: "张三", age: 10 },
            { id: 2, name: "李四", age: 20 },
            { id: 3, name: "王五", age: 30 },
            { id: 4, name: "赵六", age: 40 }
          ]
        };
      },
      template: `
      <div>
        <h3>用户组件</h3>
          <table>
           <thead>
             <tr>
               <th>编号</th>
               <th>姓名</th>
               <th>年龄</th>
               <th>操作</th>
             </tr>
           </thead>
           <tbody>
             <tr v-for="item in userlist" :key="item.id">
               <td>{{item.id}}</td>
               <td>{{item.name}}</td>
               <td>{{item.age}}</td>
               <td><a href="javascript:;" @click="goDetail(item.id)">详情</a></td>
             </tr>
           </tbody>
          </table>
      </div>
    `,
    methods: {
      goDetail(id){
        this.$router.push('/detail/'+id)
      }
    },
    };
    const Rights = {
      template: `
      <div>
          <h3>权限管理</h3>
      </div>
    `
    };
    const Goods = {
      template: `
      <div>
          <h3>商品管理</h3>
      </div>
    `
    };
    const Order = {
      template: `
      <div>
          <h3>订单管理</h3>
      </div>
    `
    };
    const Setting = {
      template: `
      <div>
          <h3>系统设置</h3>
      </div>
    `
    };
    const Detali={
      props:['id'],
      template: `
      <div>
          <h3>用户详情---{{id}}</h3>
          <button @click="goBack">点击后退</button>
      </div>
    `,
    methods:{
      goBack(){
        this.$router.go(-1)
      }
    }
    }
    const router = new VueRouter({
      routes: [
        {
          path: "/",
          redirect:'/user',
          component: App,
          children: [
            {
              path: "/user",
              component: User
            },
            {
              path: "/rights",
              component: Rights
            },
            {
              path: "/goods",
              component: Goods
            },
            {
              path: "/order",
              component: Order
            },
            {
              path: "/setting",
              component: Setting
            },
            {
              path: "/detail/:id",
              component: Detali,props:true
            }
          ]
        }
      ]
    });
    new Vue({
      el: "#app",
      router,
      data: {}
    });
  </script>
</html>
